import { classMap } from './map-data'

export const createDom = (args) => {}

export const createCanvas = (args) => {
  const cv = document.createElement('canvas')

  args.width && (cv.width = args.width)
  args.height && (cv.height = args.height)

  const ctx = cv.getContext('2d', { willReadFrequently: Boolean(args.isGPU) })

  return { cv, ctx }
}

export class Create {
  constructor(wrap) {
    this.$wrap = wrap
  }

  createDom(tag, attr, style) {
    const dom = document.createElement(tag)

    !!attr &&
      Object.keys(attr).forEach((k) => {
        dom[k] = attr[k]
      })

    !!style &&
      Object.keys(style).forEach((k) => {
        dom.style[k] = style[k]
      })

    return dom
  }

  createCanvas(args) {
    const cv = document.createElement('canvas')

    args && args.width && (cv.width = args.width)
    args && args.height && (cv.height = args.height)
    args && args.backColor && (cv.style.backgroundColor = args.backColor)

    const ctx = cv.getContext('2d', {
      willReadFrequently: Boolean(args && args.isGPU),
    })

    return { cv, ctx }
  }

  div(style) {
    return this.createDom('div', null, Object.assign({}, style))
  }

  // ----------------------------------------
  leftWrap() {
    return this.createDom('div', null, {
      width: this.$wrap.clientWidth * 0.45 + 'px',
    })
  }

  centerWrap() {
    return this.createDom('div', null, {
      width: this.$wrap.clientWidth * 0.35 + 'px',
      marginLeft: '10px',
    })
  }

  rightWrap() {
    return this.createDom('div', null, { flex: '1' })
  }

  centerCanvasWrap(height) {
    return this.createDom('div', null, {
      height: height + 'px',
    })
  }

  toolsBar() {
    return this.createDom('div', { className: classMap.toolsBar })
  }

  header(msg) {
    return this.createDom('div', {
      className: classMap.title || '标题',
      innerText: msg,
    })
  }

  button(txt, handle, cb) {
    const btn = this.createDom('button', {
      className: classMap.button,
      innerText: txt || '操作按钮',
    })

    btn.addEventListener(handle, cb)

    return btn
  }

  uploadInput(handle, cb) {
    const input = this.createDom(
      'input',
      {
        type: 'file',
      },
      {
        display: 'none',
      }
    )

    input.addEventListener(handle, cb)

    return input
  }

  formItem(txt) {
    const item = this.createDom('div', { className: classMap.formItem })

    const label = this.createDom(
      'label',
      { innerText: txt + ':', className: classMap.label },
      null
    )
    item.appendChild(label)

    return item
  }

  select(opts, v, changeCallback) {
    const selectInput = this.createDom('select')

    opts.forEach((ele) => {
      const opt = this.createDom('option', {
        value: ele.value,
        innerText: ele.label,
      })
      selectInput.appendChild(opt)
    })

    selectInput.value = v

    selectInput.addEventListener('change', changeCallback)

    return selectInput
  }

  input(v, changeCallback) {
    const ipt = this.createDom('input')
    ipt.value = v
    ipt.addEventListener('input', changeCallback)

    return ipt
  }
}
